<template>
  <v-app id="sandbox">
 <!-- 左侧菜单栏 -->
    <v-navigation-drawer
      v-model="primaryDrawer"
      app
    >
      <v-row class="fill-height" no-gutters>
        <v-navigation-drawer
          class="rightNavIcon"
          dark
          mini-variant
          mini-variant-width="56">
          <v-list-item class="px-2 ma-0" @click="userCardDialog=false">
            <v-list-item-avatar height="40" class="ma-0">
              <v-img src="https://randomuser.me/api/portraits/women/75.jpg" ></v-img>
            </v-list-item-avatar>
          </v-list-item>

          <v-divider></v-divider>
          <v-list
            dense
            nav>
            <v-list-item
              v-for="(item,key) in items"
              class="pa-0"
              @click="switchNav(key)"
              :key="key">
              <v-list-item-action class="ma-auto">
                <v-tooltip right>
                  <template v-slot:activator="{ on }">
                    <div v-on="on">
                      <v-icon :color="(item.id == itemsParent) ? 'navChoose':'white'" size="25">{{ item.icon }}</v-icon>
                    </div>
                  </template>
                  <span>{{ item.title }}</span>
                </v-tooltip>
              </v-list-item-action>
            </v-list-item>
          </v-list>
          <template v-slot:append>
            <div style="text-align: center;">
                <v-tooltip right>
                  <template v-slot:activator="{ on }">
                       <!-- 更多设置 -->
                       <v-btn icon v-on="on" @click="settingMoreDialog = true">
                         <v-badge overlap color="navChoose" dot>
                            <v-icon color="white" class="mx-1">mdi-tune</v-icon>
                         </v-badge>
                       </v-btn>
                  </template>
                  <span>{{ "设置" }}</span>
                </v-tooltip>
            </div>
          </template>
        </v-navigation-drawer>
        <v-list class="grow py-0" style="overflow-y: hidden;height:100%">
          <v-list-item class="px-2">
              <v-list-item-title style="text-align: center;letter-spacing: 1em;font-size: 20px;text-indent: 1em;">管理员</v-list-item-title>
          </v-list-item>

          <v-list-item-group dark color="navChoose" v-model="itemsSon" mandatory class="indexItemGroup">
              <v-list-item
                 v-for="(sonItem,keyOrder) in items[itemsParent]['childrenItem']"
                 :key="keyOrder">
                       <v-list-item-icon>
                         <v-icon v-text="sonItem.icon" :color="(itemsSon == keyOrder) ? 'navChoose' : 'navNoChoose'"></v-icon>
                       </v-list-item-icon>
                       <v-list-item-content style="width:105px">
                         <v-list-item-title v-text="sonItem.title" :style="{'color': (itemsSon == keyOrder ? $vuetify.theme.themes.light.navChoose : $vuetify.theme.themes.light.navNoChoose)}" />
                       </v-list-item-content>
              </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-row>

    </v-navigation-drawer>
    <v-app-bar
      dense
      app>
      <v-app-bar-nav-icon
        @click.stop="primaryDrawer = !primaryDrawer"
      />
      <v-toolbar-title>后台管理</v-toolbar-title>
    </v-app-bar>

    <v-content>
      <v-container fluid style="height:100%" no-gutters class="pa-0">
        <v-row
          no-gutters
          style="min-height:100%;background-color: #e8ebea;"
        >
        <!-- index的子路由 -->
          <router-view class="routerView"></router-view>
        </v-row>
      </v-container>
    </v-content>

    <v-footer
      inset
      height="25px"
      class="pa-0"
      app>
      <v-spacer></v-spacer>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
    <!-- 更多 -->
    <setting-more :pDialog="settingMoreDialog" @close="closeDialogFn('settingMoreDialog')"></setting-more>
    <!-- 个人卡片 -->
    <user-card :pDialog="userCardDialog" @close="closeDialogFn"></user-card>
  </v-app>
</template>

<script>
  //导入模板
  import settingMore from "@/components/settingMore.vue"
  import userCard from "@/components/userCard.vue"

  export default {
    data: () => ({
       itemsParent:"echarts",//选中的父nav
       itemsSon:0,//选中的子nav
       items: {
          "echarts":{ id:"echarts",title: 'ECharts', icon: 'mdi-table-search',
              childrenItem:[
                {id:"e-bar",icon:"mdi-chart-bar",title:"柱形图"},
                {id:"e-line",icon:"mdi-chart-line",title:"折线图"},
              ],
          },
          "datatables":{ id:"datatables",title: 'DataTables', icon: 'mdi-file-table',
              childrenItem:[
                {id:"d-table",icon:"mdi-file-table-box",title:"表格"},
                {id:"d-fixhead",icon:"mdi-file-table-box-multiple-outline",title:"表头固定"},
              ],
           },
		   "ckeditors":{ id:"ckeditors",title: 'Ckeditor', icon: 'mdi-table-edit',
		       childrenItem:[
		         {id:"c-type1",icon:"mdi-playlist-edit",title:"ckEditor4编辑器"},
		         // {id:"c-type1",icon:"mdi-playlist-edit",title:"编辑器"},
		       ],
		    },
      },

      primaryDrawer:true,//导航抽屉是否显示

      //更多设置
      settingMoreDialog:false,
      //个人卡片（默认为true关闭）
      userCardDialog:true,

    }),

    watch:{
      itemsSon(val,oldvalue){
        //切换路由
        this.$router.push(this.items[this.itemsParent]["childrenItem"][val].id)
      }
    },
    mounted() {
      // this.$router.push({name:"eBar"})
      this.$router.push("e-bar")
    },
    created(){

    },
    methods:{
      //切换父级nav
      switchNav(key){
        if(this.itemsParent != key){
          this.itemsParent= key;
          this.$router.push(this.items[this.itemsParent]["childrenItem"][this.itemsSon].id)
        }
      },
      //关闭个人卡片，更多设置
      closeDialogFn(key,value=false){
        this[key] = value;
      },

    },
    components:{
      settingMore,
      userCard,
    }
  }
</script>

<style lang="scss">
 @import '@/sass/common.scss';
  .rightNavIcon{
    transform: translateX(0%)!important;
    visibility: visible!important;
  }
  .indexItemGroup{
    height: calc(100% - 48px)!important;
    overflow: auto;
  }
//路由样式，有滚轮，高宽占满
  .routerView{
    width:100%;
    overflow: hidden;
  }

</style>
